<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>9.9包邮</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/zepto.min.js"></script>
    <script type="text/javascript" src="../script/aui-slide.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <style>
        #ulList , #ulList .group{
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      justify-content: space-between;
    }
    #ulList li {
      padding: 0.5rem;background: white;width: 100%
      /*width: 50%*/
    }
    #ulList li>div{
      border-bottom: 1px solid #f5f5f5;
      overflow: hidden;
    }
    .videoPlayer {
      width: 100%;
      position: relative;
    }

    /* .videoPlayer::after {
      position: absolute;
      content: ' ';
      width: 0;
      height: 0;
      margin: 50%;
      left: -0.5rem;
      top: -1rem;
      border: 20px solid transparent;
      border-left: 30px solid #ccc;
    }

    .videoPlayer::before {
        position: absolute;
        content: ' ';
        width: 3rem;
        height: 3rem;
        margin: 50%;
        left: -1.5rem;
        top: -1.5rem;
        border: 1px solid #ccc;
        border-radius: 50%;
    } */

    #ulList .group_title{
        display: flex;
        align-items: flex-start;
        font-size: 14px;
        padding-left: 5px;
        margin-bottom: 5px;
    }
    #ulList .group_title>div{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    #ulList .group{
        padding: 0 5px;
        font-size: 10px;
        margin-bottom: 5px;
        color:#ccc;
    }
    #ulList .group .volume{
        padding: 0 5px;
        background: red;
        color:#fff;
        position: relative;
        overflow: hidden;
    }
    #ulList .group .volume::before{
        content: ' ';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: -2.5px;
        top:50%;
        margin-top: -2.5px
    }
    #ulList .group .volume::after{
        content: ' ';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        right: -2.5px;
        top:50%;
        margin-top: -2.5px
    }
    .recommend{
      display: flex;
      flex-wrap:wrap;
      align-items: center;
    }
    .tb_zt_text .tb_zt_texttit {color: #333333;font-size: 0.7rem;}
    .tb_zt_texttit{font-size: 0.7rem;}
    .tb_price{color:#FF175D;font-size: 0.6rem;float: left;}
    .tb_price span{text-decoration:none;color:#FF175D;font-size: 0.9rem;padding-left: 0.2rem;padding-right: 0.2rem;}
    .ta_zt{height: 1.2rem;overflow: hidden;margin-bottom: 0.2rem;}
    .tb_numbar{color: #999999;font-size: 0.6rem;float: right;
    margin-top: 0.2rem;}
    .z_bottom{height: 1.2rem}
    .z_bottom dl{float: left;padding: 0.1rem 0.2rem;border-radius: 0.2rem;font-size:0.6rem;margin-right: 0.2rem;}
    .z_bottom dt,.z_bottom dd{float: left;}
    .z_bottom .z_l{background: #FCEAEA;color: #FF175D;}
    .z_bottom .z_r{background: #FFEFCE;color: #FFAD03}
    .z_bottom .z_r dt{border-right: 1px dashed #999999;}
    .z_bottom .z_r dt,.z_bottom .z_r dd{padding-right:0.2rem;}
    .aui-list-item-media{-webkit-flex: 0 0 6.35rem;flex: 0 0 6.35rem;height: 6.35rem;margin-right: .5rem;width: 4.5rem;margin-right: 0.2rem;}
    .tb_zt_text{margin-top: 0.5rem;}
    </style>
</head>

<body>
    <div class="aui-content aui-margin-b-15">
        <div style="padding:15px;">
            <div class="recommend">
                <h1 style="margin-right:5px;">墙裂推荐</h1>
                <h3 style="color:#ccc;">|精选好物品质保证</h3>
            </div>
            <img src='../image/nine_nine_tj.png'>
        </div>
        <ul id="ulList">
          <!-- <li class="aui-list-item">
              <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img class="goods_img" src="/storage/emulated/0/Android/data/com.apicloud.apploader/cache/disk/thumb/e47f5a94" _src="https://img.alicdn.com/imgextra/i2/3013499366/TB2UcHyk7CWBuNjy0FaXXXUlXXa_!!3013499366.jpg"> </div>
               <div class="tb_zt_right"> <div class="tb_zt_texttop"> <div class="tb_zt_text"> <div class="tb_zt_texttit aui-ellipsis-2"> 衣橱飘香袋除臭除味衣柜香包防霉防虫</div> </div> </div> <div class="ta_zt"> <div class="tb_price">¥<span>7.90</span>券后</div> <div class="tb_numbar">月销:3549&nbsp;|&nbsp;天猫</div> </div> <div class="z_bottom"> <dl class="z_l"><dt>赚</dt><dd>￥0.16</dd></dl> <dl class="z_r"><dt>券</dt><dd>￥2.00</dd></dl> </div> </div> </div>
          </li> -->
        </ul>
    </div>
</body>
<script type="text/javascript">
    var renderLi, searchVal = '',
        sortVal = '0',
        min_idVal = '1';
    apiready = function () {
        renderLi = doT.template($api.text($api.byId('templateLimit')));
        getDataFrm()
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            getDataFrm()
        });
    };

    function getDataFrm(data) {
        var search ,sort ,min_id ,bool ;

        if(data){
            search = data.search,sort = data.sort,min_id = data.min_id,bool = data.bool;
        }

        searchVal = search || search == '' ? search : searchVal
        sortVal = sort || sort == '0' ? sort : sortVal
        min_idVal = min_id ? min_id : min_idVal

        var urlTransform = window.urlTransformZGD(window.APIServerZGD.NineNine, {
            keywordVal: searchVal, //关键词
            sortVal: sortVal, //排序类型
            min_idVal: min_idVal, //分页
            typeVal: '2', //类别 9.9 为 2
            backVal: '10', //分页条目
        })
        console.log(urlTransform)
        _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
            if (ret.code === 1) {
                var _data = ret.data

                for (var i = 0; i < _data.length; i++) {
                    _data[i].item_id = _data[i].itemid
                    _data[i].is_tmall = _data[i].shoptype == 'B' ? '1' : '0'
                }

                if (bool) {
                    //改变搜索条件后重新数据列表
                    $api.html($api.byId('ulList'), renderLi(_data));
                } else {
                    $api.append($api.byId('ulList'), renderLi(_data));
                }

                min_idVal = ret.min_id
                //console.log(JSON.stringify(ret))
            } else {
                if ( ret.total=='0' && bool ) {
                    //改变搜索条件后无条目返回置空
                    $api.html($api.byId('ulList'), '');
                }
                console.log(JSON.stringify(ret))
            }
        });
    }
</script>
<script id="templateLimit" type="text/x-dot-template">
    {{ for (var key in it){ }}

    <li class="aui-list-item" onclick='open_goods({{= JSON.stringify( it[key] ) }})'>
        <div class="aui-media-list-item-inner">
          <div class="aui-list-item-media">
            <img src={{= it[key]['itempic']+'_500x500.jpg' }}>
          </div>
         <div class="tb_zt_right"> <div class="tb_zt_texttop"> <div class="tb_zt_text"> <div class="tb_zt_texttit aui-ellipsis-2">{{= it[key]['itemtitle'] }}</div> </div> </div> <div class="ta_zt"> <div class="tb_price">¥<span>{{= it[key]['itemendprice'] }}</span>券后</div> <div class="tb_numbar">月销:{{= it[key]['itemsale'] }}&nbsp;|&nbsp;{{= it[key]['shoptype'] == 'B' ? '天猫':'淘宝' }}</div> </div> <div class="z_bottom"> <dl class="z_l"><dt>赚</dt><dd>￥0.16</dd></dl> <dl class="z_r"><dt>券</dt><dd>￥{{= it[key]['couponmoney'] }}</dd></dl> </div> </div> </div>
    </li>

    {{ } }}
</script>

</html>
